<template>
	<div id="app">
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">支付房租</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" @click="go_order()" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>

		<v-stepper v-model="e1">
			<v-stepper-header outlined>
				<v-stepper-step :complete="e1 > 1" step="1">提交</v-stepper-step>

				<v-divider></v-divider>

				<v-stepper-step :complete="e1 > 2" step="2">确认</v-stepper-step>

				<v-divider></v-divider>

				<v-stepper-step :complete="e1 > 3" step="3">付款</v-stepper-step>

				<!-- <v-divider></v-divider> -->

				<!-- <v-stepper-step step="4">成功</v-stepper-step> -->
			</v-stepper-header>

			<v-stepper-items>
				<v-stepper-content step="1" style="height: 100%;">
					<v-form ref="form" v-model="valid" lazy-validation>
						<v-card class="mb-12" color="" height="80%" outlined>
							<v-text-field v-model="house_data.title" label="房屋信息" filled disabled style="height: 10vh !important;"></v-text-field>
							<v-text-field v-model="house_data.address" label="详细地址" filled disabled style="height: 10vh !important;">{{house_data.address}}</v-text-field>
							<v-text-field v-model="house_data.month_price" label="每月租金(元/月)" filled disabled style="height: 10vh !important;">{{house_data.month_price}}</v-text-field>
							<v-text-field v-model="house_deposit" label="租房押金(单位:元)" :rules="[rules.house_deposit,rules.number_check]"
								filled style="height: 10vh !important;"></v-text-field>
							<v-text-field v-model="pay_month" label="出租时长(单位:月)" :rules="[rules.pay_month,rules.number_check]" filled style="height: 10vh !important;"></v-text-field>
							<v-file-input v-model="files" filled :rules="[rules.contract_image]" accept="image/png, image/jpeg, image/bmp" validate-on-blur
								prepend-icon="" label="合同照片" @change="handleFile"></v-file-input>
								<div v-if="contract_image !=''">
									<img :src="contract_image" alt="未加载" style="margin: 0 auto;width: 35vw;height: 15vh;">
								</div>
								<div style="height: 1vh;"></div>
						</v-card>
						<div style="float: right;">
							<v-btn :disabled="!valid" class="mr-4" @click="validate" style="background-color:#FF5252 !important;color:white">
								下一步
							</v-btn>
						</div>
						<div class="clearfloat"></div>
					</v-form>
				</v-stepper-content>

				<v-stepper-content step="2">
					<v-card class="mb-12" color="" height="70vh" outlined>
						<v-list-item three-line>
							<v-list-item-avatar tile size="100" width="130"><img :src="house_data.index_image_url" alt="未加载" />
							</v-list-item-avatar>
							<v-list-item-content>
								<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{house_data.title}}</span></v-list-item-title>
								<v-list-item-subtitle>{{house_data.address}}</v-list-item-subtitle>
								<div class="overline" style="color:#FF5252">{{house_data.month_price}}元/月</div>
							</v-list-item-content>
						</v-list-item>
						<v-text-field v-model="house_deposit" label="租房押金" filled disabled style="height: 10vh !important;width: 90%;margin: 0 auto;"></v-text-field>
						<v-text-field v-model="house_rent" label="房租" filled disabled style="height: 10vh !important;width: 90%;margin: 0 auto;"></v-text-field>
						<div class="order_list">
							<ul>
								<li>订单总额</li>
								<li style="color:#FF5252">¥{{all_money}}</li>

								<li>可获得积分</li>
								<li style="color:#FF5252">¥{{get_integral}}</li>

								<li>应支付</li>
								<li style="color:#FF5252">¥{{all_money}}</li>
							</ul>
						</div>
					</v-card>
					<div style="float: right;">
						<v-btn text @click="return_teep()">取消</v-btn>
						<v-btn @click="e1=3" style="background-color:#FF5252 !important;color:white">
							下一步
						</v-btn>
					</div>
					<div class="clearfloat"></div>
				</v-stepper-content>

				<v-stepper-content step="3">
					<v-card class="mb-12" color="" height="80vh" outlined>
						<v-card class="mx-auto" width="100%" outlined>
							<v-card-actions>
								<div style="color: #747577;width: 100%;"><span style="float: left;">需付款 </span><span style="float: right;color:#FF5252">{{all_money}} 元</span></div>
							</v-card-actions>
						</v-card>
						<div style="padding-top: 1vh;"></div>
						<v-card class="mx-auto" width="100%" outlined>
							<v-card-actions>
								<div style="color: #747577;width: 100%;"><span style="float: left;">支付方式 </span></div>
							</v-card-actions>
							<v-divider></v-divider>
							<div @click="pay_house_send()">
								<v-list-item three-line>
									<v-list-item-avatar tile size="100"><img src="../../../../../../static/pay/pay_logo.png" alt="未加载" />
									</v-list-item-avatar>
									<v-list-item-content>
										<v-list-item-title class="headline mb-1">支付宝</v-list-item-title>
										<v-list-item-subtitle>推荐有支付宝账号的用户使用</v-list-item-subtitle>
									</v-list-item-content>
								</v-list-item>
							</div>

							<div class="clearfloat"></div>
						</v-card>
					</v-card>
					<div style="float: right;">
						<v-btn text @click="return_teep_two()">取消</v-btn>
						<v-btn @click="pay_house_send()" style="background-color:#FF5252 !important;color:white">
							去支付
						</v-btn>
					</div>
					<div class="clearfloat"></div>
				</v-stepper-content>

<!-- 				<v-stepper-content step="4">
					<v-card class="mb-12" color="" height="70vh" outlined>
						<div class="no_content">
							<icon name="pay_finish" scale="12"></icon>
							<div style="margin: 0 auto;font-size: 18px;">恭喜您，成功支付房租！</div>
							<div style="margin: 0 auto;color: gray;">您的房租已经支付成功，请保存好此支付凭证</div>
						</div>
					</v-card>
					<div class="clearfloat"></div>
					<div style="float: right;">

					</div>
				</v-stepper-content> -->

			</v-stepper-items>
		</v-stepper>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
		
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "PayOrder",
		data() {
			return {
				e1: 1,
				timeout:1000,
				snackbar:false,
				message:'',
				house_data:[],
				house_deposit: '', // 租房押金
				month_rent: '',  // 出租月份
				pay_month: '',  // 本次支付
				files: [],  // 合同图片
				valid: true,
				contract_image:'',
				rules: {
					contract_image: value => !value || value.size < 2000000 || '图片的大小小于2MB！',
					house_deposit: value => !!value || '',
					pay_month: value => !!value || '',
					number_check: value => {
						const pattern = /^[0-9]*$/;
						return pattern.test(value) || "";
					},
				},
				order_id:this.$route.params.order_id
			}
		},
		computed: {
			house_rent: function() {
				return Number(this.house_data.month_price) * Number(this.pay_month)
			},
			all_money: function() {
				return Number(this.house_rent) + Number(this.house_deposit)
			},
			get_integral:function(){
				return Number(this.all_money/10)
			}
		},
		methods: {
			go_order() {
				this.$router.go(-1)
			},
			validate() {
				if (this.$refs.form.validate()) {
					let _this = this;
					axios
						.post("/api/v1.0/order/save_data",{
								order_id:_this.order_id,
								deposit:_this.house_deposit,
								pay_month:_this.pay_month,
								contract_image:_this.contract_image
							})
						.then(function(response) {
							if (response.data.errno === '0') {
								console.log(response.data)
								_this.e1 = 2
							} else if (response.data.errno === '4101') {
								// 未登跳转到登录页面
								setTimeout(function() {
									_this.$router.replace({
										path: "/login"
									});
								}, 1000);
							}
						})
						.catch(function() {
							_this.message = "连接服务器失败！";
						});

				}
			},
			return_teep(){
				this.e1 = 1
			},
			return_teep_two(){
				this.e1 = 2
			},
			
			handleFile() {
				let data = new FormData()
				data.append('image_file', this.files)
				let _this = this;
				axios
					.post("/api/v1.0/users/avatar", data, {
						headers: {
							'Content-Type': 'multipart/form-data',
						},
					})
					.then(function(response) {
						if (response.data.errno === '0') {
							// 保存头像到七牛云成功提示信息
							_this.contract_image = response.data.data.image_url
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						}
					})
					.catch(function() {
						_this.snackbar = true;
						_this.message = "连接服务器失败！";
					});
			},
			pay_house_send(){
				let _this = this;
				axios
					.post("/api/v1.0/order/"+_this.order_id+"/payment",{
							all_money:_this.all_money,
						})
					.then(function(response) {
						if (response.data.errno === '0') {
							console.log(response.data.data.pay_url)
							location.href=response.data.data.pay_url
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			}
		},
		mounted(){
			console.log(this.order_id)
			let _this = this;
			axios
				.get("/api/v1.0/order/get_pay_order",{
					params:{
						order_id:this.order_id
					}
				})
				.then(function(response) {
					if (response.data.errno == '0') {
						console.log(response.data);
						_this.house_data = response.data.data.house;
						console.log(_this.house_data);
					} else if (response.data.errno == '4101') {
						// 未登跳转到登录页面
						setTimeout(function() {
							_this.$router.replace({
								path: "/login"
							});
						}, 1000);
					} else {
						console.log(response.data)
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	}
</script>

<style scope>
	.v-stepper__label {
		display: flex !important;
	}

	.order_list ul li {
		width: 50%;
		margin-bottom: .3rem;
		float: left;
		/* line-height: .6rem; */
		color: #555555;
		text-align: center;
		/* 对超出的文本进行隐藏 */
		overflow: hidden;
		/* text-overflow设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉 */
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		/* 设置文本不换行 */
		white-space: nowrap;
	}

	.order_list {
		padding-top: 5vh;
	}
</style>
